<template>
  <div>
    <el-card style="width:100%;height:calc(100vh - 40px);">
      <div slot="header" class="clearfix">
        <span>客户留言</span>
      </div>
      <div class="customerMessage flex flex-h">
        <ul class="customerList">
          <li
            class="nameList flex"
            v-for="(item,index) in customerList"
            :key="index"
            @click="checkMessage(item)"
          >
          	<img :src="item.image" style="width: 30px;height: 30px;border-radius: 50%;"/>
            <span style="width: 123px;text-align: center;">{{item.username}}</span>
            <!-- <i :class="['dot',{'active':item.status=='1'}]"></i> -->
          </li>
        </ul>
        <div class="tableBox">
          <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column label="客户id">
              <template slot-scope="scope">
                <div v-if="scope.row.status==0">{{scope.row.fromId}}</div>
                <div v-else>我</div>
              </template>
            </el-table-column>
            <!--<el-table-column label="客户名称">
              <template slot-scope="scope">
                <div v-if="scope.row.status==0">{{scope.row.userName}}</div>
                <div v-else></div>
              </template>
            </el-table-column>-->
            <el-table-column prop="content" label="信息"></el-table-column>
            <el-table-column label="留言时间" >
              <template slot-scope="scope">
                <span>{{scope.row.createTime | formatDate}}</span>
              </template>
            </el-table-column>
            <el-table-column label="人员" width="100" align="center">
              <template slot-scope="scope">
                <div v-if="scope.row.status=='1'">客服</div>
                <div v-else>{{scope.row.messageType}}</div>
              </template>
            </el-table-column>
          </el-table>
          <div style="width:100%;text-align:center;margin-top:20px">
            <el-button type="primary" @click="dialogFormVisible = true">回复</el-button>
          </div>

          <el-pagination
            style="text-align:center;margin-top:20px"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[8]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </div>
      <el-dialog title="回复用户" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="输入回复文字" :label-width="formLabelWidth">
            <el-input v-model="form.message" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addMessage">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { formatDate } from "@/utils/validate.js";
import { MSG_DIALOG, MSG_LIST, MSG_ADD } from "@/utils/api";
export default {
  data() {
    return {
      formLabelWidth: "120px",
      toId: 0,
      dialogFormVisible: false,
      form: {
        message: ""
      },
      userRecord:{},
      customerList: [],
      tableData: [],
      currentPage: 1,
      pageSize: 8,
      total: 0
    };
  },
  filters: {
    formatDate(time) {
      var date = new Date(time * 1000);
      return formatDate(date, "yyyy-MM-dd hh:mm:ss");
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    addMessage() {
      MSG_ADD({
        content: this.form.message,
        toId: this.toId,
        messageType:this.userRecord.messageType
      }).then(res => {
        this.$message.success("回复成功");
        this.dialogFormVisible = false;
        var item = { userId: this.toId };
        this.checkMessage(this.userRecord);
      });
    },
    //  获取列表及信息
    initData() {
      MSG_DIALOG().then(res => {
        this.customerList = res.data;
      });
    },
    checkMessage(item) {
    	console.log(item,'item')
      this.userRecord = item;
      MSG_LIST({
        toId: 0,
        fromId: this.userRecord.userId,
        pageNo: this.currentPage,
        pageSize: this.pageSize,
        messageType:this.userRecord.messageType
      }).then(res => {
        this.tableData = res.data.dataList;
        this.toId = item.userId;
        this.total = res.data.count
        for(let i in this.tableData){
        	if(this.tableData[i].messageType == 1){
        		this.tableData[i].messageType = '商城用户'
        	}else if(this.tableData[i].messageType == 2){
        		this.tableData[i].messageType = 'AML城用户'
        	}
        	
        }
      });
    },
    reply(row, index) {},
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.checkMessage(this.userRecord);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.checkMessage(this.userRecord);
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
  padding: 10px 0;
}
.customerMessage {
  height: calc(100vh - 125px);
  padding: 10px;
  background: #fff;
  .customerList {
    width: 200px;
    height: 80%;
    border-radius: 5px;
    box-shadow: 2px 3px 15px 0 #ccc;
    .nameList {
      width: 100%;
      //   height: 100%;
      padding: 15px 20px;
      border-bottom: 1px solid #eee;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      &:hover {
        background: #f1f1f1;
      }
      .dot {
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #ccc;
      }
      .active {
        background: rgb(7, 131, 241);
      }
    }
  }
  .tableBox {
    flex: 1;
    height: 80%;
    background: #fff;
    padding: 10px 2px;
    margin-left: 15px;
    border-radius: 5px;
    box-shadow: 2px 3px 15px 0 #ccc;
  }
}
</style>